﻿@{
    ViewBag.Title = "My loanablecategories";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@if (User != null)
{
    <h2 class="centeredHeaderText">All my location categories</h2>
    <div id="PresentationBox">
        <table class="DataPresentationtable" id="myCategories">
            <tr>
                <td><center><img src="/Content/images/loading.gif" />loading data...</center></td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">

        //function redirectOnEditpage(id) {
        //    window.location.replace("/LoanableLocationCategory/Edit/"+id);
        //}

        var dataSet = [];
        
        $(document).ready(function () {
            $.ajax({
                url: '/api/LoanableLocationCategory/',
                type: 'GET',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Authorization", getAuthorizationHeader('@User.UserId', ''));
                },
                dataType: "json"
            }).done(function (data) {
                $.each(data, function (key, val) {
                    console.log(val);

                    var cat = [];
                    cat.Name = "<a href='/LoanableLocationCategory/Get/" + val.CategoryId + "'>" + val.Name + "</a>";
                    cat.Loanables = val.Count;
                    //cat.EditBtn = '<input type="button" class=\"checkInOutBtn\" value="edit" onClick="redirectOnEditpage(' + val.LocationCategory.CategoryId + ')" />'

                    dataSet.push(cat);
                });

                $('#myCategories').DataTable({
                    "bFilter": false,
                    //"fnDrawCallback": function () {
                    //    if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
                    //        $('#myCategories_paginate').css("display", "block");
                    //    } else {
                    //        $('#myCategories_paginate').css("display", "none");
                    //    }
                    //},
                    "data": dataSet,
                    "columns": [
                        { "data": "Name", "title": "Name" },
                        { "data": "Loanables", "title": "Loanables" }
                    ]
                });

                //remove ugly DataTable css
                $('#myCategories').removeClass("dataTable");
            });
    });
    </script>
}
